<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表单</title>
    </head>
    <body>
        <!-- form 表单 用来收集数据 action属性 表示收集好数据后提交的地址 #占位符表示提交到当前页 -->
        <form action="#">
            <!-- 表单里可以写各种表单控件，如输入框，单选，多选等
                    type属性的值：
                        text 普通文本输入框
                        password 密码框 maxlength 设置最大长度 minlength设置最小长度
                        radio 单选
                        checkbox 多选
                        submit提交按钮 reset重置按钮 button普通按钮(需配合js使用)
                        date 日期
                        color 颜色
                        range 范围
                        file 文件
                    name属性 用于给输入框起名 且需要提交数据就必须有name属性且有值
                    placeholder属性 用于占位符 可进行输入提示
                    value属性本来存在，用来保存控件的值，也可以通过value属性自定义输入框的默认值
                    readonly属性 表示只读 只能看不能改 可以提交数据
                    disabled属性 表示禁用 可以看到值 但做不了任何操作 也不能进行数据提交
                    radio单选 checkbox多选必须设置相同的name分到同一组，且必须给每个选项设置value值，否则进行提交后结果是on
                    checked selected设置选项被默认选中
            -->
            姓名：<input type="text" name="username" placeholder="请输入姓名"><br>
            昵称：<input type="text" name="nickname" value="nashan"><br>
            昵称：<input type="text" name="nickname2" value="nashan" readonly><br>
            昵称：<input type="text" name="nickname3" value="nashan" disabled><br>
            密码：<input type="password" name=”password“ maxlength="6" value="1234567"><br>
            性别：<input type="radio" name="gender" value="1" checked>男
                 <input type="radio" name="gender" value="0">女<br>
            爱好：<input type="checkbox" name="like" value="game">游戏
                 <input type="checkbox" name="like" value="music">音乐
                 <input type="checkbox" name="like" value="movie" checked>电影<br>
            生日：<input type="date" name="birthday"><!-- h5新增 --><br>
            幸运色：<input type="color" name="lcolor"><!-- h5新增 --><br>
            缩放：<input type="range" name="scale"><!-- h5新增 --><br>
            文件：<input type="file" name="file"><!-- h5新增 --><br>
            <hr>
            喜欢的城市：<!-- 下拉选框 -->
            <select name="city" >
                <option value="bj" selected>北京</option>
                <option value="xm">厦门</option>
                <option value="cd">成都</option>
                <option value="km">昆明</option>
                <option value="gy">贵阳</option>
            </select><br>
            <!-- 关联控件 -->
            <input type="checkbox" id="ok">
            <label for="ok">我同意以上协议</label>
            <br>
            <!-- 关联控件 获取焦点 -->
            <label for="wz">关联文字</label> <!-- 点击文字 鼠标光标会跳到id匹配的输入框 -->
            <input type="text" id="wz">
            <hr>
            <input type="submit" value="点此提交"> <!-- submit 提交 -->
            <input type="reset" value="点此重置">
            <input type="button" value="普通按钮">
            <button>普通按钮</button> <!-- h5新增 等价于<input type="button" value="普通按钮"> -->


        </form>







    </body>
</html>